Improvements to UI settings readability by DedeHai · Pull Request #5328 · wled/WLED

DedeHai · 2026-01-29T18:45:15Z

I am proposing "sections" instead of a "continuous list"
like this:

had to increase the contrast slightly to make it work well, i.e. dim the background down.

let me know what you think and I will update all config pages to this pattern.

the flash cost is minimal, changes to LED settings page is a handful of bytes (64 if you need a number ;) )

Summary by CodeRabbit

Style
- Darker global background and a new rounded "sec" panel style for clearer, spaced section blocks.
Refactor
- Settings pages reorganized into grouped, self-contained sections across LEDs, 2D panels, Wi‑Fi & Network, Time, Security, Sync, UI, Usermods, and pins for improved navigation.
New Features
- New LED controls (global brightness factor, per-output limiter, LED outputs block), Color & White (gamma, white balance/CCT), IR Remote and Relay subsections, palette wrapping and FPS warnings, Ethernet type selector, timezone/macro presets, skin/CSS upload, expanded sync/notification options.
Other
- Minor label and wording updates (e.g., "WiFi & Network").

coderabbitai · 2026-01-29T18:45:35Z

Walkthrough

Reorganizes many HTML settings pages into new visual sections (.sec), restructures the LED settings into multiple subsections with new controls (brightness factor, gamma/CCT/white, IR/relay blocks, LED outputs, advanced palette/FPS options), adds Ethernet/WiFi/network blocks and UI skin upload, updates CSS (.sec) and small C++ edits (json.cpp, set.cpp, xml.cpp).

Changes

Cohort / File(s)	Summary
LED Settings UI `wled00/data/settings_leds.htm`	Breaks the previous single LED & Hardware block into multiple `.sec` subsections (LED setup, Color & White, Hardware: Buttons/IR/Relay, LED outputs, General: Power up/Transitions/Random/Timed, Advanced). Adds Global brightness factor, gamma/CCT/white controls, IR/JSON UI, relay options, palette-wrapping and FPS warnings, moves config template and trailing toast container; structural DOM reflow for form integration.
Grouped settings pages (structural rewraps & minor content edits) `wled00/data/settings.htm`, `wled00/data/settings_2D.htm`, `wled00/data/settings_pin.htm`, `wled00/data/settings_sec.htm`, `wled00/data/settings_sync.htm`, `wled00/data/settings_time.htm`, `wled00/data/settings_ui.htm`, `wled00/data/settings_um.htm`, `wled00/data/settings_wifi.htm`	Wraps many settings blocks in new `<div class="sec">` containers and reorders headings/closures. Introduces/relocates inputs and labels (Time zone, Macro/Timer presets, Ethernet Type, WiFi Power, ESP-NOW toggle, OTA/passphrase UI, UI skin upload, holidays upload, send notifications options). Mostly presentational/layout changes with a few text/label tweaks.
Styling `wled00/data/style.css`	Adds `.sec` CSS rules (background, border-radius, padding, margin, max-width) and adjusts global background color to support the new sectioned layout.
Small C++ adjustments `wled00/json.cpp`, `wled00/set.cpp`, `wled00/xml.cpp`	Minor edits: comment text tweak in `serializeInfo`, removal of `syncToggleReceive = request->hasArg(F("ST"))` from UI handler, and removal of an inner loop variable shadowing in `getSettingsJS`. No API/signature changes.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Fix LED buffer size calculation #4928: Overlapping edits to LED settings UI and per-bus/memory/pin validation in settings_leds.htm.
Improvements & fixes for HUB75 #5026: Changes to HUB75/HUB-specific LED fields and validation that may interact with the reworked LED settings layout.
Update RGB2Go Ethernet naming #4780: Ethernet option/dropdown changes in WiFi settings that overlap the Ethernet Type UI edits.

Suggested reviewers

netmindz
softhack007

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title "Improvements to UI settings readability" accurately and directly summarizes the main objective of the pull request: restructuring settings pages into visual sections to improve readability and scanability.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

wled00/data/settings_leds.htm (2)

878-880: Duplicate heading text: both <h2> and <h3> say "LED setup".

The category heading (Line 878, <h2>LED setup</h2>) and the section heading (Line 880, <h3>LED setup</h3>) use identical text. The other categories ("Hardware setup", "General settings") have distinct subsection names. Consider renaming the <h3> to something more specific (e.g., "LED outputs & limits") or dropping the <h2> since there's only one section in this category.

949-949: Minor inconsistency: warning icon encoding.

This line uses a literal ⚠ character while other warnings in the file (Lines 900, 912, 1026–1028) use the HTML entity ⚠. Both render identically, but consistency would be slightly cleaner.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

softhack007 · 2026-01-29T21:24:02Z

@DedeHai I like the new look :-)
If i understood your code correctly, the main idea is to add <div class="sec"> .... </div> around each section, right?

DedeHai · 2026-01-30T04:55:38Z

correct.
When testing I tend to be scrolling quickly through that settings page and it is annoying to have no real "overview" to quickly spot things like the relay pin for example as its just "somewhere in that list". So I came up with this.

…ndentation

DedeHai · 2026-01-30T19:47:36Z

I updated all config pages and made some other minor modifications, mainly:

renamed "WiFi Setup" to "WiFi & Network" in settings menu
renamed "LED Preferences" to "LED & Hardware" in settings menu
Added settings title in various places (sync page and UM page mostly) for a cleaner layout
removed some outdated text in time settings and added links to HTTP and JSON API
minor reordering in UI settings to better suit the sections
moved ETH settings just below WiFi settings

Total additional flash use: ~150bytes

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@wled00/data/settings_sec.htm`:
- Around line 62-70: The HTML has invalid nesting because the inline element
<span id="OTA"> opens before a </div> and closes after several block elements;
move or refactor this so the element with id "OTA" does not span across
block-level boundaries — either wrap the relevant block content inside a single
container (e.g., give the <div class="sec"> or a new <div> the id "OTA" instead
of using a span) or remove the span and toggle visibility via the existing <div
class="sec"> using the same id; ensure related JS (function U(), and inputs
named "AO" and "SU") references are updated to target the new container.

wled00/data/settings_sec.htm

DedeHai · 2026-01-30T19:53:10Z

Screenshots:

after LED settings now come color & white settings, then additional hardware, then general settings. Also updated some wordings to avoid FAQ.

DedeHai · 2026-02-05T16:36:28Z

I updated the LED/Harware settings page with a more "natural workflow".

moved "brightness factor" to the top, just before the ABL and renamed to "Global brightness factor" to have both auto and non-auto limits in the same place
moved gamma & white balance up, right after the LED settings as those influence LEDs directly
re-wording regarding bootup settings / random palette / 2-wire CCT
Looks like this now (LED settings omitted):

DedeHai · 2026-02-08T16:28:49Z

@netmindz what do you think of this? it's ready to merge, there are zero functional changes, only cosmetics.

DedeHai · 2026-02-08T16:29:30Z

I see it has conflicts due to recent addition to user_fx, ready to merge after a quick fixup.

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

wled00/data/settings_sync.htm (1)

127-128: ⚠️ Potential issue | 🟡 Minor

"Send Alexa notifications" checkbox visible but non-functional when Alexa is compiled out.

The SA checkbox (line 127) is in the always-visible "Send" section, outside the Alexa-specific <div id="Alexa"> that gets hidden when WLED_DISABLE_ALEXA is defined. However, in xml.cpp, the SA value is only populated inside #ifndef WLED_DISABLE_ALEXA (line 497), and when Alexa is disabled, toggle('Alexa') is called (line 500) which hides only the Alexa divs—not the "Send" section. This leaves the SA checkbox visible but unchecked and non-functional.

Move the SA checkbox into the Alexa-specific <div id="Alexa"> (inside settings_sync.htm), or wrap it in a separate conditionally-hidden element.

The SH checkbox (line 128) is correctly populated unconditionally in xml.cpp.

improved readability of lettings_leds.htm

6f69bee

DedeHai requested review from netmindz and softhack007 January 29, 2026 18:45

DedeHai marked this pull request as draft January 29, 2026 18:46

DedeHai added 3 commits January 30, 2026 08:04

left shifted indentation to preserve "blame" history but still have i…

055c55b

…ndentation

update all config pages with sections

6754f54

revert debug change

1657913

DedeHai marked this pull request as ready for review January 30, 2026 19:47

coderabbitai bot reviewed Jan 30, 2026

View reviewed changes

wled00/data/settings_sec.htm Outdated Show resolved Hide resolved

DedeHai added 2 commits January 30, 2026 21:01

move ID's

5542e93

reordered LED settings with more natural "workflow"

93a2967

after LED settings now come color & white settings, then additional hardware, then general settings. Also updated some wordings to avoid FAQ.

Merge branch 'main' into UI_readability

4672dec

coderabbitai bot reviewed Feb 8, 2026

View reviewed changes

Merge branch 'main' into UI_readability

1c84ab0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improvements to UI settings readability#5328

Improvements to UI settings readability#5328
DedeHai wants to merge 8 commits intowled:mainfrom
DedeHai:UI_readability

DedeHai commented Jan 29, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 29, 2026 •

edited

Loading

Uh oh!

softhack007 commented Jan 29, 2026

Uh oh!

DedeHai commented Jan 30, 2026

Uh oh!

DedeHai commented Jan 30, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

DedeHai commented Jan 30, 2026

Uh oh!

DedeHai commented Feb 5, 2026 •

edited

Loading

Uh oh!

DedeHai commented Feb 8, 2026

Uh oh!

DedeHai commented Feb 8, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

DedeHai commented Jan 29, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

softhack007 commented Jan 29, 2026

Uh oh!

DedeHai commented Jan 30, 2026

Uh oh!

DedeHai commented Jan 30, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

DedeHai commented Jan 30, 2026

Uh oh!

DedeHai commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DedeHai commented Feb 8, 2026

Uh oh!

DedeHai commented Feb 8, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

DedeHai commented Jan 29, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 29, 2026 •

edited

Loading

DedeHai commented Feb 5, 2026 •

edited

Loading